<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas生成二维码</title>
</head>
<body>
<main>
    <!--生成二维码-->
    <div id="container">
        <canvas width="400" height="400"></canvas>
    </div>
    <!--二维码美化-->
    <img id="img_show" style="width: 573px;height: 453px;">
</main>

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jqueryqr.js"></script>
<script src="js/qrcode.js"></script>
<script src="js/picCode.js"></script>
<script>
    (function () {
        //大多数情况下，建议采用30%的容错率,对目前主流手机，在绝大多数扫描场景下，容错率越高，越容易被快速扫描!!!
        //容错率：L - 7% damage,M - 15% damage,Q - 25% damage,H - 30% damage

        //生成基础二维码
        $("#container").erweima({
            label: '康乐幼儿园',
            minVersion: 10,  //最低版本号，数值越小，二维码越密集
            fill: "#000",   //背景色
            text: "http://www.baidu.com", //网址
            size: 500,
            radius: 0,  //二维码圆角
            fontcolor: "#6badd4"  //字体颜色
        });

        //美化
        var image = new Image();
        image.src = $('#container canvas')[0].toDataURL("image/png");
        $('#container').remove();
        drawCode(
            ["img/code-bg.png", image.src, "img/code-rabbit.png"],  //所有的图片数组
            2148,  //canvas的宽度
            1812,  //canvas的高度
            $('#img_show')  //需要展示的图片的div容器
        );
    })();
</script>
</body>
</html>